<template>
  <q-form @submit="submit" class="q-gutter-md dialog-content" style="height: 567px">
    <div class="gateway-container">
      <div class="left">
        <transition
          appear
          enter-active-class="animated bounceInDown"
          leave-active-class="animated fadeOut"

        >
          <img id="gateway" src="../../../../../statics/img/gateway.png" alt="gateway">
        </transition>
      </div>
      <div class="right">
        <q-card-section>
          <q-input style="width: 280px" v-model.trim="formData.gateWayId" outlined dense
                   :rules="[val => val && val.length > 0  || '请填写网关序列号',
                    val => val && /^[0-9a-zA-Z]*$/g.test(val) || '只能输入数字或者字母']">
            <template v-slot:before>
              <label class="text-right name label-width"><span class="text-red">*</span>网关序列号:</label>
            </template>
          </q-input>

          <q-select
            style="width: 280px"
            outlined
            dense
            emit-value
            map-options
            options-dense
            :options="productModelOptions"
            v-model="formData.productModel"
            :rules="[ val => val !== '' || ' 请选择产品型号']">
            <template v-slot:no-option>
              <div class="no-option"/>
            </template>
            <template v-slot:before>
              <label class="text-right name bold" style="width: 100px"><span class="text-red">*</span>产品型号:</label>
            </template>
          </q-select>
        </q-card-section>
      </div>
    </div>
    <q-separator/>
    <div class="dialog-footer text-center margin-t-10">
      <q-btn outline label="取消" color="primary" @click="hideDialog" class="q-mr-md"/>
      <q-btn unelevated label="下一步" color="primary" type="submit" :loading="submitting"/>
    </div>
  </q-form>
</template>

<script>

import { mapGetters } from 'vuex'
import { createPlcDevice } from '../../../../../boot/miot/plc-list'

export default {
  name: 'new-gateway',
  data () {
    return {
      submitting: false,
      shows: true,
      formData: {
        gateWayId: '',
        productModel: ''
      }
    }
  },
  props: {
    products: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    ...mapGetters([
      'client'
    ]),
    productModelOptions () {
      const data = []
      this.products.forEach(item => {
        data.push({
          value: item.productID,
          label: item.productName
        })
      })
      return data
    }
  },
  methods: {
    hideDialog () {
      this.$emit('hideDialog')
    },

    async submit () {
      const index = this.products.findIndex(item => item.productID === this.formData.productModel)
      const params = {
        gatewaySN: this.formData.gateWayId,
        productName: this.products[index].productName,
        productSN: this.products[index].productSN,
        gateWayType: 0
      }
      this.submitting = true
      createPlcDevice(params).then(res => {
        this.$emit('successSubmit', { ...params, ...res.data })
      }).catch(() => {
        this.$emit('failedSubmit')
      }).finally(() => {
        this.submitting = false
      })
    }
  }
}
</script>

<style scoped lang="stylus">
.gateway-container
  height 515px
  display flex

  .label-width
    width 100px

  .left,
  .right
    width 50%
    display flex
    align-items center
    justify-content center

#gateway
  animation-duration 1s
</style>
